<template>
  <div id="main" style="height:100%;">
    <view-box body-padding-top="45px" body-padding-bottom="55px">

      <x-header slot="header" :left-options="{showBack: false}" style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        {{title}}
      </x-header>
      <!--{{tabbarSelectedIndex}}-->
      <router-view></router-view>

      <tabbar v-model="tabbarSelectedIndex">
        <tabbar-item link="/main/metting" @on-item-click="onChangeTitle('会议室')">
          <i slot="icon" class="iconfont icon-huiyishi-"></i>
          <span slot="label">会议室</span>
        </tabbar-item>
        <tabbar-item link="/main/manger" @on-item-click="onChangeTitle('会议管理')">
          <i slot="icon" class="iconfont icon-huiyishiguanli"></i>
          <span slot="label">会议管理</span>
        </tabbar-item>
        <tabbar-item link="/main/my" @on-item-click="onChangeTitle('我的')">
          <i slot="icon" class="iconfont icon-huiyiguanli"></i>
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem, ViewBox, XHeader } from "vux";

  export default {
    name: "Main",
    components: {
      Tabbar,
      TabbarItem,
      ViewBox,
      XHeader
    },
    data() {
      return {
        tabbarSelectedIndex: 0,
        title: "会议室"
      };
    },
    methods: {
      onChangeTitle(name) {
        this.title = name;
      }
    }
  };
</script>
<style>

</style>
